var app = new Vue({
    el:'#app',
    data:{
        list:[
            {
                id:1,
                name:'谢汶霖',
                price:'20',
                count:1
            },
            {
                id:2,
                name:'谢学长',
                price:'50',
                count:1
            },
            {
                id:3,
                name:'谢学姐',
                price:'20000',
                count:1
            },
        ],
        List:[]
    },
    //默认全选
    mounted: function () {
        this.checkAll();
        this.checkAllElement(document.querySelector(".checkAll"));
    },
    computed:{
        totalPrice:function(){
            var total = 0 ;
            for(var i = 0 ; i <this.List.length;i++){
                var item = this.List[i];
                total += item.price*item.count;
            }
            return total.toLocaleString();
        }
    },
    methods:{
        //减少购买数量
        handleReduce:function(index){
            if(this.list[index].count === 1 )return;
            this.list[index].count--;
        },
        //增加购买数量
        handleAdd:function(index){
            this.list[index].count++;
        },
        //移除商品
        handleRemove:function(index){
            console.log("handleRemove-index:"+index);
            this.list.splice(index,1);
            var id = index +1;
            var $List = this.List;
            for (var i = 0; i < $List.length; i++) {
                var item = $List[i];
                if (item.id == id) {
                $List.splice(i, 1);
                }
            }
        },
        //全选框
        checkAllOrNot: function (event) {
            if (event.target.checked) {
            this.checkAll();
            console.log("checkList：" + this.checkList);
            } else {
            console.log("全不选");
            this.checkInItems('noCheckAll');
            //清空
            this.List.splice(0);
            }
        },
        checkAll: function () {
            console.log("全选");
            this.checkInItems('checkAll');
            this.List = this.list.concat();//复制商品列表
        },
        checkInItems: function (type) {
            var items = document.querySelectorAll('.checkItem');
            for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (type === 'checkAll') {
            item.checked = true;
            } else {
            item.checked = false;
            }}
        },
        checkItem: function (event, index) {
            console.log("checkItem");
            var element = event.target;
            var $allCheck = document.querySelector(".checkAll");
            if (element.checked) {//勾选，加入已选择列表
            this.List.push(this.list[index]);
            this.checkAllElement($allCheck);
            } else {//不勾选，从已选择列表中去除
            this.List.splice(index, 1);
            $allCheck.checked = false;
            }
        },
        checkAllElement: function (element) {
            //如果所有的商品都已被勾选，则勾选全选框
            if (this.List.length == this.list.length) {
            element.checked = true;
            }
        }
    }
});